<template>
    <div>
        <el-collapse-item title="- 文字信息" :name="props.id">
            <ul class="editorformTable">
                <!-- 是否文字 -->
                <li class="editorformItem" v-if="showConfig.label">
                    <div class="editorformItemName">是否文字</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="style.isLabel" @change="change('isLabel', style.isLabel)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
                <li class="editorformItem" v-if="style.isLabel && !style.isLength">
                    <div class="editorformItemName">文字内容</div>
                    <div class="editorformItemFunc">
                        <el-input v-model="label.text" @input="change('text', label.text)" class="editorforminput" placeholder="请输入文字内容" />
                    </div>
                </li>
                <!-- 是否长度 -->
                <div v-if="showConfig.length">
                    <li class="editorformItem">
                        <div class="editorformItemName">是否长度</div>
                        <div class="editorformItemFunc">
                            <el-switch v-model="style.isLength" @change="change('isLength', style.isLength)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                        </div>
                    </li>
                    <li class="editorformItem" v-if="style.isLength && !style.isLabel">
                        <div class="editorformItemName">长度</div>
                        <div class="editorformItemFunc">{{ label.text }}</div>
                    </li>
                </div>
                <!-- 是否面积 -->
                <div v-if="showConfig.acreage">
                    <li class="editorformItem">
                        <div class="editorformItemName">是否面积</div>
                        <div class="editorformItemFunc">
                            <el-switch v-model="style.isLength" @change="change('isLength', style.isLength)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                        </div>
                    </li>
                    <li class="editorformItem" v-if="style.isLength && !style.isLabel">
                        <div class="editorformItemName">面积</div>
                        <div class="editorformItemFunc">{{ label.text }}</div>
                    </li>
                </div>
                <!-- 是否体积 -->
                <div v-if="showConfig.volume">
                    <li class="editorformItem">
                        <div class="editorformItemName">是否体积</div>
                        <div class="editorformItemFunc">
                            <el-switch v-model="style.isLength" @change="change('isLength', style.isLength)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                        </div>
                    </li>
                    <li class="editorformItem" v-if="style.isLength && !style.isLabel">
                        <div class="editorformItemName">体积</div>
                        <div class="editorformItemFunc">{{ label.text }}</div>
                    </li>
                </div>
                <!-- 公用 -->
                <div v-if="style.isLabel || style.isLength">
                    <li class="editorformItem">
                        <div class="editorformItemName">字体</div>
                        <div class="editorformItemFunc">
                            <el-select v-model="label.font_family" class="editorforminput" @change="change('font_family', label.font_family)">
                                <el-option v-for="opt in fontFamily" :key="opt.value" :label="opt.label" :value="opt.value" />
                            </el-select>
                        </div>
                    </li>
                    <li class="editorformItem">
                        <div class="editorformItemName">字体大小</div>
                        <div class="editorformItemFunc">
                            <el-input-number v-model="label.font_size" @input="change('font_size', label.font_size)" class="editorforminput" :step="1" conliols-position="right" :min="10" />
                        </div>
                    </li>
                    <li class="editorformItem">
                        <div class="editorformItemName">是否加粗</div>
                        <div class="editorformItemFunc">
                            <el-switch v-model="label.font_weight" @change="change('font_weight', label.font_weight)" active-value="bold" inactive-value="normal" style="--el-switch-on-color: rgba(32, 160, 255)" />
                        </div>
                    </li>
                    <li class="editorformItem">
                        <div class="editorformItemName">是否斜体</div>
                        <div class="editorformItemFunc">
                            <el-switch v-model="label.font_style" @change="change('font_style', label.font_style)" active-value="italic" inactive-value="normal" style="--el-switch-on-color: rgba(32, 160, 255)" />
                        </div>
                    </li>
                    <li class="editorformItem">
                        <div class="editorformItemName">颜色</div>
                        <div class="editorformItemFunc">
                            <el-color-picker :predefine="defaultColor" @change="change('color', label.color)" show-alpha class="editorforminput" v-model="label.color" />
                        </div>
                    </li>
                    <li class="editorformItem">
                        <div class="editorformItemName">是否衬色</div>
                        <div class="editorformItemFunc">
                            <el-switch v-model="label.outline" @change="change('outline', label.outline)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                        </div>
                    </li>
                    <li class="editorformItem" v-if="label.outline">
                        <div class="editorformItemName">衬色颜色</div>
                        <div class="editorformItemFunc">
                            <el-color-picker :predefine="defaultColor" @change="change('outlineColor', label.outlineColor)" show-alpha class="editorforminput" v-model="label.outlineColor" />
                        </div>
                    </li>
                    <li class="editorformItem">
                        <div class="editorformItemName">是否背景</div>
                        <div class="editorformItemFunc">
                            <el-switch v-model="label.background" @change="change('background', label.background)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                        </div>
                    </li>
                    <li class="editorformItem" v-if="label.background">
                        <div class="editorformItemName">背景颜色</div>
                        <div class="editorformItemFunc">
                            <el-color-picker :predefine="defaultColor" @change="change('backgroundColor', label.backgroundColor)" show-alpha class="editorforminput" v-model="label.backgroundColor" />
                        </div>
                    </li>
                    <li class="editorformItem">
                        <div class="editorformItemName">横向偏移</div>
                        <div class="editorformItemFunc">
                            <el-input-number v-model="label.pixelOffsetX" @input="change('pixelOffsetX', label.pixelOffsetX)" class="editorforminput" :step="1" conliols-position="right" />
                        </div>
                    </li>
                    <li class="editorformItem">
                        <div class="editorformItemName">纵向偏移</div>
                        <div class="editorformItemFunc">
                            <el-input-number v-model="label.pixelOffsetY" @input="change('pixelOffsetY', label.pixelOffsetY)" class="editorforminput" :step="1" conliols-position="right" />
                        </div>
                    </li>
                </div>
            </ul>
        </el-collapse-item>
    </div>
</template>
<script setup lang="ts">
import { reactive, computed, ref } from "vue";
import { defaultColor } from "@/config/config";
import { mars3d } from "@/utils/global";
interface Props {
    id?: any; // 默认值
    graphic?: any;
}
const props = withDefaults(defineProps<Props>(), {
    id: "",
    graphic: {},
});
let layer: any = reactive({});
layer = computed(() => {
    return props.graphic;
});
const label: any = reactive(layer.value.style.label);
const style: any = reactive(layer.value.style);
const graphic: any = reactive(layer.value);
const change = (opt: any, val: any) => {
    let graphic = layer.value;
    setTimeout(() => {
        switch (opt) {
            case "isLabel":
                graphic.setStyle({ isLabel: val });
                isLabels(val);
                break;
            case "text":
                graphic.setStyle({ label: { text: val } });
                break;
            case "isLength":
                graphic.setStyle({ isLength: val });
                isLengths(val);
                break;
            case "font_family":
                graphic.setStyle({ label: { font_family: val } });
                break;
            case "font_size":
                graphic.setStyle({ label: { font_size: val } });
                break;
            case "font_weight":
                graphic.setStyle({ label: { font_weight: val } });
                break;
            case "font_style":
                graphic.setStyle({ label: { font_style: val } });
                break;
            case "color":
                graphic.setStyle({ label: { color: val } });
                break;
            case "outline":
                graphic.setStyle({ label: { outline: val } });
                break;
            case "background":
                graphic.setStyle({ label: { background: val } });
                break;
            case "backgroundColor":
                graphic.setStyle({ label: { backgroundColor: val } });
                break;
            case "pixelOffsetX":
                graphic.setStyle({ label: { pixelOffsetX: val } });
                break;
            case "pixelOffsetY":
                graphic.setStyle({ label: { pixelOffsetY: val } });
                break;
            default:
                graphic.setStyle(style);
        }
    }, 100);
};
// 是否文字
const isLabels = (val: any) => {
    let graphic = layer.value;
    if (val) {
        label.text = "文字";
        style.isLength = false;
        graphic.setStyle({ isLength: false, label: { text: "文字" } });
    } else {
        graphic.setStyle({ label: { text: "" } });
    }
};
let showConfig = reactive({
    label: true,
    length: false,
    acreage: false,
    volume: false,
});
const plottingType: any = ref(layer.value.options.plottingType);
// 是否长度
const isLengths = (val: any) => {
    let graphic = layer.value;
    if (val) {
        style.isLabel = false;
        // 长度
        if (showConfig.length) {
            label.text = `${graphic.distance.toFixed(2)} m`;
            graphic.setStyle({ isLabel: false, label: { text: `${graphic.distance.toFixed(2)} m` } });
        }
        // 面积
        if (showConfig.acreage) {
            let area = 0;
            if (plottingType.value == "plane") {
                area = style.dimensions_x * style.dimensions_y;
            } else {
                area = graphic.area;
            }
            graphic.setStyle({ isLabel: false, label: { text: `${area.toFixed(2)} ㎡` } });
            label.text = `${area.toFixed(2)}  ㎡`;
        }
        // 体积
        if (showConfig.volume) {
            let volume = 0;
            // 立体
            if (plottingType.value == "box") {
                // 计算公式- V=a*b*c
                volume = style.dimensions_x * style.dimensions_y * style.dimensions_z;
            }
            // 圆柱
            if (plottingType.value == "column") {
                // 计算公式- V=πr²*h
                volume = Math.PI * style.radius * style.radius * style.diffHeight;
            }
            // 椭圆柱
            if (plottingType.value == "ellipticCylinder") {
                // 计算公式- V=π×a×b×h
                volume = Math.PI * style.semiMinorAxis * style.semiMajorAxis * style.diffHeight;
            }
            // 圆锥
            if (plottingType.value == "cylinder") {
                // 计算公式- V=1/3×π×r²×h
                volume = (1 / 3) * Math.PI * style.bottomRadius * style.bottomRadius * style.length;
            }
            // 球及椭球
            if (plottingType.value == "ellipsoid") {
                // 计算公式- V=4/3×π×a×b×c
                volume = (4 / 3) * Math.PI * style.radii_x * style.radii_y * style.radii_z;
            }
            graphic.setStyle({ isLabel: false, label: { text: `${volume.toFixed(2)} m³` } });
            label.text = `${volume.toFixed(2)}  m³`;
        }
    } else {
        graphic.setStyle({ label: { text: "" } });
    }
};
const fontFamily: any = reactive([
    {
        label: "宋体",
        value: "宋体",
    },
    {
        label: "微软雅黑",
        value: "微软雅黑",
    },
    {
        label: "楷体",
        value: "楷体",
    },
    {
        label: "隶书",
        value: "隶书",
    },
    {
        label: "黑体",
        value: "黑体",
    },
]);
// 显示长度或面积或体积初始化
const setShowConfig = () => {
    let type = plottingType.value;
    if (type == "segment" || type == "curve" || type == "pipeline" || type == "corridor" || type == "rail" || type == "road") {
        showConfig.length = true;
    }
    if (type == "plane" || type == "rectangle" || type == "polygon" || type == "regular" || type == "circle" || type == "sector" || type == "ellipse") {
        showConfig.acreage = true;
    }
    if (type == "box" || type == "column" || type == "ellipticCylinder" || type == "cylinder" || type == "ellipsoid" || type == "radar") {
        showConfig.volume = true;
    }
};
setShowConfig();
// 监听修改点跟新动态显示数据
props.graphic.on(mars3d.EventType.editMovePoint, (e: any) => {
    let graphic = props.graphic;
    console.log("编辑修改了点", e.graphic);
    // 长度
    if (showConfig.length) {
        label.text = `${graphic.distance.toFixed(2)} m`;
        graphic.setStyle({ isLabel: false, label: { text: `${graphic.distance.toFixed(2)} m` } });
    } // 面积
    if (showConfig.acreage) {
        let area = 0;
        if (plottingType.value == "plane") {
            area = style.dimensions_x * style.dimensions_y;
        } else {
            area = graphic.area;
        }
        graphic.setStyle({ isLabel: false, label: { text: `${area.toFixed(2)} ㎡` } });
        label.text = `${area.toFixed(2)}  ㎡`;
    }
    // 体积
    if (showConfig.volume) {
        let volume = 0;
        // 立体
        if (plottingType.value == "box") {
            // 计算公式- V=a*b*c
            volume = style.dimensions_x * style.dimensions_y * style.dimensions_z;
        }
        // 圆柱
        if (plottingType.value == "column") {
            // 计算公式- V=πr²*h
            volume = Math.PI * style.radius * style.radius * style.diffHeight;
        }
        // 椭圆柱
        if (plottingType.value == "ellipticCylinder") {
            // 计算公式- V=π×a×b×h
            volume = Math.PI * style.semiMinorAxis * style.semiMajorAxis * style.diffHeight;
        }
        // 圆锥
        if (plottingType.value == "cylinder") {
            // 计算公式- V=1/3×π×r²×h
            volume = (1 / 3) * Math.PI * style.bottomRadius * style.bottomRadius * style.length;
        }
        // 球及椭球
        if (plottingType.value == "ellipsoid") {
            // 计算公式- V=4/3×π×a×b×c
            volume = (4 / 3) * Math.PI * style.radii_x * style.radii_y * style.radii_z;
        }
        graphic.setStyle({ isLabel: false, label: { text: `${volume.toFixed(2)} m³` } });
        label.text = `${volume.toFixed(2)}  m³`;
    }
});
</script>
